<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, initial-scale=1, shrink-to-fit=no">
    <div th:replace="~{admin/common :: common-link}"></div>
    <link rel="stylesheet" th:href="@{'/admin/assets/custom/hb-comment/extend/emoji.css'}">
    <style>
        .content {
            margin: 22px auto;
        }
    </style>
</head>
<body>

<div class="content">
    <div class="block block-fx-shadow">
        <div class="block-content">
            <form id="saveForm" class="my-10" th:action="@{${baseUrl} + '/reply.json'}" method="post">
                <input type="hidden" id="pId" name="pId" th:value="${pId}" />
                <div class="form-group row">
                    <label class="col-lg-2 col-form-label" for="content">原文内容 </label>
                    <div class="col-lg-10">
                        <p id="originalContent"></p>
                    </div>
                </div>

                <div class="form-group row">
                    <label class="col-lg-2 col-form-label" for="content">回复内容 <span class="text-danger">*</span> </label>
                    <div class="col-lg-10">
                        <textarea id="content" name="content" class="form-control" aria-label="With textarea" rows="4" style="resize: none" placeholder="回复内容" data-bv-notempty="true" data-bv-notempty-message="内容不能为空"></textarea>
                    </div>
                </div>

                <div class="form-group row">
                    <div class="col-lg-2"></div>
                    <div class="col-lg-10">
                        <button type="submit" class="btn btn-alt-primary pull-right" id="submitBtn">
                            <i class="fa fa-send mr-5"></i> 发送
                        </button>
                        <label class="col-form-label"><span title="表情" id="emoji_btn" style="cursor: pointer;font-size: 24px;display:inline-block;transform: translateY(-18px)">☺</span></label>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<div th:replace="~{admin/common :: common-script}"></div>
<script th:src="@{'/admin/assets/custom/hb-comment/extend/emoji.js'}"></script>
<script type="text/javascript" th:inline="javascript">
    let originalContent = [[${vo.content}]];
    let baseUrl = "/admin/assets/custom";
    $(function() {
        $("#submitBtn").on("click", function () {
            $.hexo.action.save("saveForm", null, function (resp) {
                $.hexo.modal.tip("回复评论成功", "success", function () {
                    window.parent.$.hexo.modal.close();
                    window.parent.CommentManager.query();
                });
            });
        });

        $("#originalContent").html($.formatContent(originalContent, baseUrl));

        $("#emoji_btn").on("click", function() {
            let that = this;
            $.createEmojiPanel({
                baseUrl: baseUrl,
                target: $(that),
                textarea: "#content"
            });
        });
    })
</script>
</body>
</html>